<template>
  <div class="category">
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
        v-for="category in categories"
        :key="category.id"
        @click="onchange(category.id)"
        :title="category.name" />

      </van-sidebar>
    </div>
    <div class="right">

      <router-view />

    </div>
  </div>
</template>

<script>
import { getCategories } from '@/api/home.js'
export default {
  name: 'Category',
  data () {
    return {
      activeKey: 0,
      categories: []

    }
  },
  async created () {
    const category = await getCategories()
    this.categories = category.list.slice(1)

    this.$router.push('/category/sub/' + this.categories[0].id)
    // console.log(this.categories)
  },
  methods: {
    onchange (id) {
      console.log('改变了', id)
      // this.$router.push('/category/sub?id=' + id).catch(() => {})
      // 字符串型
      // this.$router.push({
      //   path: '/category/sub?id=' + id
      // }).catch(() => {})
      // 使用name属性
      this.$router.push({
        name: 'sub',
        // query: { // query 里的 参数叫查询字符参数  以？连接的参数
        //   id
        // }
        params: {
          cid: id
        }
      }).catch(() => {})
      // 对象型
    }
  }
}
</script>

<style lang="less" scoped>
.category {
  display: flex;
  height: 100%;
  overflow: auto;
}
.left {
  width: 80px;
  background: #fff;
}
.right {
  flex: 1;
  background: yellowgreen;
}
</style>
